<template>
    <div class="active-container">
        <ul class="active-wrapper">
            <li class="title">{{title}}</li>
            <li class="message">{{message}}</li>
            <li>
                <el-button type="primary" class="btn" @click="toLogin()">返回登录页面</el-button>
            </li>
        </ul>
    </div>
</template>
<script>
    import { activeAccount } from "../../api/register";
    import {messageMixin} from "../../common/js/mixin";
    import {mapMutations} from 'vuex'

    export default {
        mixins: [messageMixin],
        data () {
            return {
                title: '',
                message: '',
            }
        },
        created () {
            let active = this.$route.query.active
            if (!active) {
                return
            }
            activeAccount(active).then(res => {
                let type = 'success'
                if (res.code === 200) {
                    this.title = '激活成功'
                    this.message = '请点击返回按钮回到登录界面继续登录'
                    this.setFirstActive(active)
                } else {
                    this.title = '激活失败'
                    this.message = '请联系管理员进行处理'
                    type = 'error'
                }
                this._messge({
                    message: res.message,
                    type
                })
            })
        },
        methods: {
            toLogin () {
                this.$router.push('/login')
            },
            ...mapMutations({
                setFirstActive: 'IS_FIRST_ACTIVE'
            })
        },
    }
</script>

<style scoped lang="scss">
    .active-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: url("../../assets/images/bg.jpg") no-repeat center bottom/cover;
        .active-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 85%;
            height: 85%;
            border-radius: 20px;
            background-color: rgba(28, 57, 118, 0.32);
            user-select: text;
            .title {
                line-height: 72px;
                font-size: 48px;
                font-weight: 700;
            }
            .message {
                margin: 58px 0 88px;
                line-height: 21px;
                font-size: 14px;
            }
            .btn {
                width: 180px;
                height: 54px;
                border-radius: 20px;
                font-size: 18px;
                background-color: rgba(85, 141, 227, 0.73);
                text-align: center;
            }
        }
    }

</style>
